<template>
  <a-drawer v-model:visible="visible" title="设备类型详情" :width="width >= 580 ? 580 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <a-descriptions-item label="类型名称">{{ dataDetail?.name }}</a-descriptions-item>
      <a-descriptions-item label="状态">
        <GiCellStatus :status="dataDetail?.status" />
      </a-descriptions-item>
      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
      <a-descriptions-item label="类型描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
    </a-descriptions>

    <a-divider />

    <a-card title="机型管路" :bordered="false">
      <GiTable
        row-key="id"
        :data="dataDetail?.devicePipes"
        :columns="columns"
        :scroll="{ x: '100%', y: '100%', minWidth: 520 }"
      >
        <template #materialType="{ record }">
          <GiCellTag :value="record.materialType" :dict="material_type" />
        </template>
      </GiTable>
    </a-card>
  </a-drawer>
</template>

<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core'
import { type DeviceTypeDetailResp, getDeviceType } from '@/apis/vending/deviceType'
import type { TableInstanceColumns } from '@/components/GiTable/type'
import { useDict } from '@/hooks/app'

const { width } = useWindowSize()

const visible = ref(false)
const dataId = ref('')
const dataDetail = ref<DeviceTypeDetailResp>()

const { material_type } = useDict('material_type')

const columns: TableInstanceColumns[] = [
  { title: '管路序号', dataIndex: 'position', slotName: 'position', align: 'center' },
  { title: '原料类型', dataIndex: 'materialType', slotName: 'materialType', align: 'center' },
]

// 查询详情
const getDataDetail = async () => {
  const res = await getDeviceType(dataId.value)
  dataDetail.value = res.data
}

// 打开详情
const onDetail = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({ onDetail })
</script>

<style lang="scss" scoped></style>
